<!--用户首页-->
<template>
    <div>
        <!--banner区域-->
        <div style="background: #2A2B2F;height: 388px;position: relative;overflow: hidden;border-bottom: 1px solid #EAEDF3;">
            <video playsinline=""
                   autoplay=""
                   muted=""
                   loop=""
                   id="herobg "
                   style="filter: brightness(110%);left: 50%;overflow: hidden;position: absolute;top: 0;transform: translateX(-50%);">
                <source src="//d1v8dk3ka6obgr.cloudfront.net/v5/new-assets/homepage/hero+asset_2.mp4" type="video/mp4">
            </video>
        </div>
        <div style="padding: 30px;">
            <!--欢迎标语-->
            <div style="font-size: 20px;font-weight: 600;
        margin-bottom: 28px;letter-spacing: 2px;color: #333333;">
                {{getUser.userName}},以下是最近的活动
            </div>
            <!--事件卡片区域-->
            <div class="container">
                <event_card v-for="(item,index) in data"
                            :key="index" :data="item"></event_card>
            </div>
        </div>

    </div>
</template>

<script>
    import EventCard from '@/components/EventCard';
    import Card from '@/components/card/Card';

    export default {
        name: 'userHome',
        components: {
            Card,
            'event_card': EventCard,
        },
        props: {
        },
        data () {
            return {
                data: [],
            };
        },
        created () {
            this.$apis.getEvent('').then((data)=>{
                this.data = data;
            });
        },
        mounted () {
        },
        computed: {
            getUser () {
                return this.$store.getters.getUser;
            },
        },
        activated () {
        },
        methods: {},
        watch: {},
    };
</script>

<style scoped lang="scss">
    @media screen and (min-width: 1600px) {
        .container {
            display: grid;
            grid-template-columns: 285px 285px 285px 285px !important;
            grid-template-rows: 318px;
            grid-row-gap: 15px;
            grid-auto-columns: 285px;
            grid-auto-rows: 318px;
            justify-content: space-between;
        }
    }

    .container {
        display: grid;
        grid-template-columns: 285px 285px 285px;
        grid-template-rows: 318px;
        grid-row-gap: 15px;
        grid-auto-columns: 285px;
        grid-auto-rows: 318px;
        justify-content: space-between;
    }

</style>
